<template lang="">
    <div class="goods" v-show='this.curTitle>=0&&this.curTitle<=3'>
        <div class="life" v-for="(v,i) in allGoods" :key="i">
            <div class="life_item">
              <img class="imgs" :src="v.picture" alt />
              <div class="item_main">
                <span class="name">{{v.name}}</span>
                <span class="text">{{v.point}}</span>
                <span class="moliy">参考价{{v.price}}</span>
                <span class="mol">
                  <img src="../../assets/image/moliy.png" alt />
                  {{v.stock}}
                </span>
                <div class="car">
                  <span>
                    <i>仅剩100件</i>
                  </span>
                  <van-cell is-link @click="showPopup">
                    <img src="../../assets/image/goo.png" alt />
                  </van-cell>
                  <!-- <Popop v-show="showcom"></Popop> -->
                  <van-popup
                    style="width:6.8rem;height:7rem;borderRadius:0.2rem;"
                    v-model="showcom"
                  >
                    <div class="showcom">
                      <div class="popup">
                        <span class="shopImg">
                          <img src="../../assets/logo.png" alt />
                        </span>
                        <p class="name">{{v.name}}</p>
                        <span class="inputs">
                          <img src="../../assets/image/monly.png" alt />{{v.point}}
                        </span>
                        <div class="items">
                          <img @click='sub(v)' src="../../assets/image/jian.png" alt />
                          <input type="text" v-model='v.num' @blur='showNum(v)' />
                          <img @click='add(v)' src="../../assets/image/jia.png" alt />
                        </div>
                        <button @click='addToCar(v)'>加入购物车</button>
                         <!-- <span class="xx">X</span> -->
                      </div>
                  
                    </div>
                  </van-popup>
                </div>
              </div>
            </div>
          </div>
    </div>
</template>
<script>
import url from "../axios/apiUrl";
import { postRequest } from "../api/index";
import { getRequest } from "../api/indexGet";
export default {
  data() {
    return {
      allGoods: [], //所有商品
    };
  },
  created() {
    // 获取生活用品数据
    getRequest(url.pointsGoods + "/0/7/1").then((res) => {
      this.allGoods = res.data.content.result;
      this.allGoods.forEach((obj) => {
        this.$set(obj, "num", 1);
      });
      this.totalPage = res.data.content.total;
    });
  },
};
</script>

<style lang="less">
.life {
  background: #f1f2f6;
  .life_item {
    height: 2.52rem;
    background: #ffffff;
    border-bottom: 0.2rem solid #f1f2f6;
    padding: 0.2rem;
    display: flex;
    .imgs {
      width: 2.6rem;
      height: 2.6rem;
      padding: 0.1rem;
    }
    .item_main {
      display: grid;
      padding-left: 0.6rem;
      width: 5.88rem;
      .name {
        width: 5.87rem;
        font-size: 0.26rem;
        font-family: PingFang SC;
        font-weight: bold;
        color: #222222;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: clip;
      }
      .text {
        width: 4.42rem;
        font-size: 0.22rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: #666666;
      }
      .moliy {
        font-size: 0.22rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(136, 136, 136, 0.8);
      }
      .mol {
        display: flex;
        img {
          width: 0.29rem;
          height: 0.29rem;
          padding-right: 0.2rem;
        }
        width: 1.52rem;
        height: 0.29rem;
        font-size: 0.36rem;
        font-family: PingFang SC;
        font-weight: bold;
        color: #1fb808;
      }
      .car {
        display: flex;
        justify-content: space-between;
        line-height: 0.54rem;
      }
    }
  }
}
</style>